<template>
    <div v-for="(item, label) in config_list" :key="label"
        :class="typeof item === 'object' ? 'config_class' : 'config_class_button'">
        <el-tag v-if="typeof item === 'object'" type='success' size="large">
            {{ get_text(label) }}
        </el-tag>
        <el-select-v2 v-if="typeof item === 'object'" v-model="configs[label]" :options="config_list[label]"
            :key="'select' + label" />
        <el-button v-else :type="configs[label] ? 'primary' : 'info'" @click="configs[label] = !configs[label]">{{
            label.toUpperCase() }}</el-button>
    </div>
    <el-button :type="listen ? 'danger' : 'success'" @click="listen = !listen; emits('listen', listen)"
        style="margin-top: 5px;">
        {{ listen ? '停止' : '开始' }} 数据收发
    </el-button>
</template>

<script setup lang="ts">
const props = defineProps({
    config: {
        type: Object,
        default: {
            baudrate: 115200,
            parity: 0,
            stopbits: 1,
            databits: 8,
            RTS: false,
            CTS: false,
        }
    },
})
const emits = defineEmits(['listen'])
const configs = toRef(props.config)
const listen = ref(false)
const config_list = {
    baudrate: [
        { label: '300', value: 300 },
        { label: '600', value: 600 },
        { label: '1200', value: 1200 },
        { label: '2400', value: 2400 },
        { label: '4800', value: 4800 },
        { label: '9600', value: 9600 },
        { label: '14400', value: 14400 },
        { label: '19200', value: 19200 },
        { label: '28800', value: 28800 },
        { label: '38400', value: 38400 },
        { label: '57600', value: 57600 },
        { label: '76800', value: 76800 },
        { label: '115200', value: 115200 },
        { label: '128000', value: 128000 },
        { label: '230400', value: 230400 },
        { label: '256000', value: 256000 },
        { label: '460800', value: 460800 },
        { label: '512000', value: 512000 },
        { label: '750000', value: 750000 },
        { label: '921600', value: 921600 },
        { label: '1500000', value: 1500000 },
        { label: '1843200', value: 1843200 },
        { label: '2000000', value: 2000000 },
        { label: '3686400', value: 3686400 },
    ],
    parity: [
        { label: '无(none)', value: 0 },
        { label: '偶(even)', value: 1 },
        { label: '奇(odd)', value: 2 },
    ],
    stopbits: [
        { label: '1', value: 1 },
        { label: '1.5', value: 1.5 },
        { label: '2', value: 2 },
    ],
    databits: [
        { label: '5', value: 5 },
        { label: '6', value: 6 },
        { label: '7', value: 7 },
        { label: '8', value: 8 },],
    RTS: false,
    CTS: false,
}
const get_text = (key: string) => {
    if ('baudrate' == key) {
        return '波特率'
    }
    if ('parity' == key) {
        return '校验位'
    }
    if ('stopbits' == key) {
        return '停止位'
    }
    if ('databits' == key) {
        return '数据位'
    }
    return key
}
</script>

<style scoped>
.config_class {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.config_class_button {
    display: inline;
    margin: 5px;
}

.el-tag {
    margin-right: 5px;
    font-size: 0.9em;
}
</style>